<template>
  <!--选择条件弹窗-->
  <el-dialog title="条件类型" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="800px">

    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-form-item label="标签类型" prop="selectType">
        <el-radio-group v-model="form.type" class="launchType">
          <el-radio v-for="(item,index) in typeList" :key="index" :label="Number(item.value)">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="条件类型" prop="selectType">
        <div class="item-big">
        <el-select v-model="form.selectType" placeholder="所有标签" size="small" class="select-left">
          <el-option
              v-for="item in selectTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <el-form-item  prop="selectType" label-width="0px" class="select-right">
        <MultipleSelect size="small" placeholder='企微标签' :receiverNameOpt='lableOpt'/>
        </el-form-item>
        </div>
      </el-form-item>


    </el-form>
    <div class="footer-btn">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
      <el-button @click="submitForm('form')">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { reqPlanCheckNotPass } from '@/api/advergroupPlanMgt/index'
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  name: 'chooseCondition',
  components: {
    MultipleSelect
  },
  data() {
    return {
      form: {
        type: 0,//好友id
        selectType: 0,
      },
      selectTypeList: [
        {value: 0, label: '所有标签',},
        {value: 1, label: '任意标签',}
      ],
      lableOpt: [
        {
          value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {
          value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]
        }
      ],
      typeList: [
        {value: 0, label: '企微标签',},
        {value: 1, label: '智能标签',}
      ],
      rules: {
        'selectType': [
          {required: true, message: '请选择条件类型', trigger: 'change'}
        ]
      }
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    submitForm() {
      this.$modal.confirm(`确定要驳回吗？`).then(() => {
        // reqPlanCheckNotPass(this.form).then(res => {
        //   this.$modal.selectTypeSuccess('提交成功！');
        //   this.handleCloseDialog();
        //   this.$emit('closeParentDialog');
        // })

      })
    },
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
      this.$emit('getFriendInfo', {})//把值传给父级
    }
  }
}
</script>

<style scoped lang="scss">
.item-big {
  display: flex;
  align-items: center;
  .select-left{
    width: 120px;
    margin-right: 10px;
  }
  .select-right{
    flex: 1;
  }
}
.footer-btn {
  display: flex;
  justify-content: flex-end;
}
</style>
